<template>
  <el-row class="detail-row detail-card">
    <Title title="资源信息" font-size="16px" style="margin-bottom:8px;"/>
    <el-form
      label-position="right"
      label-width="110px"
      class="lineHeight32 el-form-color999">
      <el-col :span="8">
        <el-form-item label="资源类型:">
          <div class="flex-center">
            <span>{{ orderInfo.resourceType | resourceType }}</span>
            <contrast-info-tipTool
              :origin-data="configureOrderInfo"
              :new-data="orderInfo"
              :correlate-filed="['resourceType']"
            >
              <span slot="tipContent">
                {{ getTargetData(configureOrderInfo, 'resourceType') | resourceType }}
              </span>
            </contrast-info-tipTool>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="下单平台:">
          <div class="flex-center">
            <platformIcon :data="orderInfo.orderPlatform" />
            <span>{{ orderInfo.orderPlatform || '--' }}</span>
            <contrast-info-tipTool
              :origin-data="configureOrderInfo"
              :new-data="orderInfo"
              :correlate-filed="['orderPlatform']"
              margin-left="6px"
            >
              <div slot="tipContent">
                <div class="flex-center">
                  <platformIcon :data="getTargetData(configureOrderInfo, 'orderPlatform')" />
                  {{ getTargetData(configureOrderInfo, 'orderPlatform') }}
                </div>
              </div>
            </contrast-info-tipTool>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="下单形式:">
          <span>{{ orderInfo.orderForm || '--' }}</span>
          <contrast-info-tipTool
            :origin-data="configureOrderInfo"
            :new-data="orderInfo"
            :correlate-filed="['orderForm']"
          >
            <span slot="tipContent">
              {{ getTargetData(configureOrderInfo, 'orderForm') }}
            </span>
          </contrast-info-tipTool>
        </el-form-item>
      </el-col>
      <el-col v-if="!isMultipleOrder" :span="8">
        <el-form-item label="账号:">
          <div style="display:flex;align-items:center;">
            <frameContent
              v-if="detailInfo && detailInfo.dataAccount"
              :platform="orderInfo.orderPlatform || detailInfo.accountNamePlatform"
              :data-account="detailInfo.dataAccount"
              :url="detailInfo.dataLink"
              :account-id="detailInfo.orderInfo.resourceId"
              :account-name="detailInfo.orderInfo.resourceName" />
            <div style="display:flex;align-items:center;width:90%;">
              <resource-info
                v-if="orderInfo.resourceName"
                :resource-name="orderInfo.resourceName"
                :account-name-organization="detailInfo.accountNameOrganization"
                :account-name-platform="detailInfo.accountNamePlatform"
                :resource-id="orderInfo.resourceCode"
                :resource-account-id="orderInfo.resourceId"
                resource-name-can-click
                style="max-width:calc(100% - 20px)"
                account-belong-name="none"
              />
              <span v-else>--</span>
              <mul-contrast-info-tipTool
                :data-group="[{
                  'originData': configureOrderInfo,
                  'newData': orderInfo,
                  'correlateFiled': ['orderPlatform', 'resourceName', 'resourceCode']
                }, {
                  'originData': configureDetailInfo,
                  'newData': detailInfo,
                  'correlateFiled': ['dataAccount', 'accountNamePlatform', 'dataLink', 'accountNameOrganization', 'accountNamePlatform']
                }]"
              >
                <div slot="tipContent">
                  <frameContent
                    v-if="configureDetailInfo && configureDetailInfo.dataAccount"
                    :platform="configureOrderInfo.orderPlatform || configureDetailInfo.accountNamePlatform"
                    :data-account="configureDetailInfo.dataAccount"
                    :url="configureDetailInfo.dataLink" />
                  <div v-if="configureOrderInfo && configureOrderInfo.resourceName" style="display:flex;align-items:center;width:100%;">
                    <resource-info
                      :resource-name="configureOrderInfo.resourceName"
                      :account-name-organization="configureDetailInfo.accountNameOrganization"
                      :account-name-platform="configureDetailInfo.accountNamePlatform"
                      :resource-id="configureOrderInfo.resourceCode"
                      style="max-width:calc(100% - 20px)"
                      account-belong-name="none"
                    />
                  </div>
                  <div v-if="configureDetailInfo && configureOrderInfo && !configureDetailInfo.dataAccount && !configureOrderInfo.resourceName">--</div>
                </div>
              </mul-contrast-info-tipTool>
            </div>
          </div>
        </el-form-item>
      </el-col>
      <el-col v-if="isMultipleOrder" :span="8">
        <el-form-item label="账号附件:">
          <FileShowList :file-list="orderInfo.accountAttachment" is-show-single-file />
          <contrast-info-tipTool
            :origin-data="configureOrderInfo"
            :new-data="orderInfo"
            :correlate-filed="['accountAttachment']"
          >
            <div slot="tipContent">
              <FileShowList :file-list="configureOrderInfo && configureOrderInfo.accountAttachment || []" is-show-single-file />
            </div>
          </contrast-info-tipTool>
        </el-form-item>
      </el-col>
      <el-col v-if="!isMultipleOrder" :span="8">
        <el-form-item label="账号ID:">
          <div class="flex">
            <ToolTip v-if="orderInfo.resourceCode" :content="orderInfo.resourceCode" />
            <span v-else class="resource-link">--</span>
            <contrast-info-tipTool
              :origin-data="configureOrderInfo"
              :new-data="orderInfo"
              :correlate-filed="['resourceCode']"
              style="margin-left:5px;"
            >
              <span slot="tipContent">
                {{ getTargetData(configureOrderInfo, 'resourceCode') }}
              </span>
            </contrast-info-tipTool>
          </div>
        </el-form-item>
      </el-col>
      <el-col v-if="!isMultipleOrder" :span="8">
        <el-form-item label="系统ID:">
          <div class="flex">
            <ToolTip v-if="orderInfo.resourceId" :content="orderInfo.resourceId" />
            <span v-else class="resource-link">--</span>
            <contrast-info-tipTool
              :origin-data="configureOrderInfo"
              :new-data="orderInfo"
              :correlate-filed="['resourceId']"
              style="margin-left:5px;"
            >
              <span slot="tipContent">
                {{ getTargetData(configureOrderInfo, 'resourceId') }}
              </span>
            </contrast-info-tipTool>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="运营模式:">
          <div class="flex">
            <ToolTip v-if="orderInfo.operateModeName" :content="orderInfo.operateModeName" />
            <span v-else class="resource-link">--</span>
            <contrast-info-tipTool
              :origin-data="configureOrderInfo"
              :new-data="orderInfo"
              :correlate-filed="['operateModeName']"
              style="margin-left:5px;"
            >
              <span slot="tipContent">
                {{ getTargetData(configureOrderInfo, 'operateModeName') }}
              </span>
            </contrast-info-tipTool>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="合作运营方:">
          <div class="flex">
            <ToolTip v-if="orderInfo.cooperation" :content="orderInfo.cooperation" />
            <span v-else class="resource-link">--</span>
            <contrast-info-tipTool
              :origin-data="configureOrderInfo"
              :new-data="orderInfo"
              :correlate-filed="['cooperation']"
              style="margin-left:5px;"
            >
              <span slot="tipContent">
                {{ getTargetData(configureOrderInfo, 'cooperation') }}
              </span>
            </contrast-info-tipTool>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="供应商类型:">
          <div class="flex">
            <ToolTip v-if="orderInfo.supplierType !== null" :content="orderInfo.supplierType | getSupplierType" />
            <span v-else class="resource-link">--</span>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="所有人员:">
          <div class="flex">
            <ToolTip v-if="orderInfo.accountOperationList" :content="orderInfo.accountOperationList" />
            <span v-else class="resource-link">--</span>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="所属经营体:">
          <div class="flex">
            <!-- <ToolTip v-if="orderInfo.resourceAttributionMatrix" :content="orderInfo.resourceAttributionMatrix" /> -->
            <ToolTip v-if="orderInfo.resourceAttributionMatrix" :content="orderInfo.entityTip">
              <div class="ellipsisOne">{{ orderInfo.resourceAttributionMatrix }}</div>
            </ToolTip>
            <span v-else class="resource-link">--</span>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="标签:">
          <TagSelect v-model="orderInfo.tag" mode="detail" />
        </el-form-item>
      </el-col>
    </el-form>
  </el-row>
</template>

<script>
import { standardFormat, standardFormatNoHour } from '@/filters/date';
import frameContent from '@/components/Common/frameContent';
import {
  orderTypeStatusFilter,
  setAccountState,
  setReviewState,
  setSealBillType,
  setPayWay
} from '@/filters/status';
import TagSelect from '@/components/Common/tagSelect';
import ResourceInfo from '@/components/ResourceInfo';
import { moneyFilter } from '@/filters/number';
import { getDeptFullName } from '@/filters/dept';
import Title from '@/components/Title';
import platformIcon from '@/components/Common/platformIcon';
import FileShowList from '@/components/CreateOrder/fileShowList';
// 信息对比需要
import ContrastInfoTipTool from './contrastInfoTiptool';
import { getTargetData } from '@/utils';
import MulContrastInfoTipTool from './mulContrastInfoTiptool';
import { getSupplierType } from '@/filters/status';

export default {
  components: {
    frameContent,
    Title,
    platformIcon,
    ResourceInfo,
    FileShowList,
    TagSelect,
    ContrastInfoTipTool,
    MulContrastInfoTipTool
  },
  filters: {
    standardFormat,
    setAccountState,
    standardFormatNoHour,
    orderTypeStatusFilter,
    setReviewState,
    setSealBillType,
    setPayWay,
    moneyFilter,
    getDeptFullName,
    getSupplierType,
    cooperation: (data) => {
      if (!data || data.length === 0) return '--';
      return data.map(i => i.name).join(',');
    },
    resourceType: (status) => {
      if (!status && status !== 0) return '--';
      const statusMap = {
        0: '单账号',
        1: '多账号',
        2: '无号单'
      };
      return statusMap[status];
    }
  },
  props: {
    orderInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    detailInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    configureOrderInfo: {
      type: Object,
      default: () => {
        return null;
      }
    },
    configureDetailInfo: {
      type: Object,
      default: () => {
        return null;
      }
    },
    isProject: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    orderStatus() {
      // 订单状态: 0: 草稿中 1: 待发布 2: 待核算 3: 待审批 4: 待封账 5: 封账中 6: 已封账 7: 已完成
      return this.detailInfo.orderStatus || '';
    },
    isMultipleOrder() { // 是否多账号/无号单
      return this.orderInfo.resourceType ? Number(this.orderInfo.resourceType) !== 0 : false;
    }
  },
  methods: {
    getTargetData,
    formatTag(val) {
      if (val && val.length) {
        return val.map(item => item.name).join(',');
      } else {
        return '--';
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.detail-card {
  &::v-deep {
    .el-input__inner  {
      width: 240px;
      line-height: 16px;
    }
  }
}
.flex {
  display: flex;
  align-items: center;
}
.detail-row {
  background-color: #fff;
  padding: 26px 24px 0 24px;
  &::v-deep {
    .el-form-item__label {
      color: #999;
    }
    .el-form-item__content {
      color: #333;
    }
  }
}
</style>

